import { initShaders } from './webgl.js'
import { randomColor } from '../color/index.js'

// //顶点着色器
// <script id="vertexShader" type="x-shader/x-vertex">
//     void main() {
//         gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
//         gl_PointSize = 100.0;
//     }
// </script>
// //片元着色器
// <script id="fragmentShader" type="x-shader/x-fragment">
//     void main() {
//         gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
//     }
// </script>
// gl_Position = vec4(1.0, 0.0, 0.0, 1.0);
// gl_Position = vec4(-1.0, 0.0, 0.0, 1.0);
// gl_Position = vec4(0.0, 1.0, 0.0, 1.0);
// gl_Position = vec4(0.0, -1.0, 0.0, 1.0);
// gl_Position = vec4(1.0, 1.0, 0.0, 1.0);
// gl_Position = vec4-(1.0, 1.0, 0.0, 1.0);
// gl_Position = vec4(1.0, -1.0, 0.0, 1.0);
// gl_Position = vec4(-1.0, -1.0, 0.0, 1.0);

// 顶点着色器源码
var vertexShaderSrc = `
void main(){
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);// gl_Position 内置变量，表示点的位置，必须赋值
    gl_PointSize = 100.0;// gl_PointSize 内置变量，表示点的大小（单位像素），可以不赋值，默认为1.0，，绘制单个点时才生效
}`;

// 片段着色器源码
var fragmentShaderSrc = `
void main(){
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);// 内存变量，表示片元颜色RGBA
}`;

// 顶点着色器
const vertexShaderSource = `
  // 设置浮点数据类型为中级精度
  precision mediump float;

  // 接收顶点坐标 (x,y)
  attribute vec2 a_Position;

  void main () {
    gl_Position = vec4(a_Position, 0.0, 1.0);
  }
`;
// 片元着色器
const fragmentShaderSource = `
   // 设置浮点数据类型为中级精度
   precision mediump float;

   // 接收 JavaScript 传过来的颜色值（rgba）
   uniform vec4 u_Color;

   void main(){
     vec4 color = u_Color / vec4(255, 255, 255, 1);
     gl_FragColor = color;
   }
 `;

export const _triangle = (gl, options = {}, props = {}) => {
    let {
        width = 800,
        height = 600,
        shapes,
        vsSource = vertexShaderSource,
        fsSource = fragmentShaderSource
    } = options
    // let canvas = document.createElement('canvas')
    // canvas.width = width
    // canvas.height = height
    // const gl = canvas.getContext('webgl');

    // 初始化着色器
    let program = initShaders(gl, vsSource, fsSource);

    // 获取着色器程序中变量的指针位置
    const a_Position = gl.getAttribLocation(program, 'a_Position')
    const u_Color = gl.getUniformLocation(program, 'u_Color');

    // 定义三角形的三个顶点
    const positions = [
        0, 0.5,     // 上顶点
        -0.5, -0.5, // 左顶点
        0.5, -0.5   // 右顶点
    ];

    // 创建缓冲区
    const buffer = gl.createBuffer();

    // 绑定缓冲区并指定缓冲区的类型
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

    // 往缓冲区中写入数据
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

    // 将属性绑定到缓冲区
    gl.enableVertexAttribArray(a_Position);

    // 如何读取缓冲区数据
    // 指定要修改的顶点属性的索引（允许哪个属性读取当前缓冲区的数据） - a_Position
    // 指定每个顶点属性的组成数量（一次读取几个数据） - 2
    // 指定数组中每个元素的数据类型 - gl.FLOAT（32 位 IEEE 标准的浮点数，占用 4 个字节）
    // 当转换为浮点数时是否应该将整数数值归一化到特定的范围 - false（对于类型 gl.FLOAT 和 gl.HALF_FLOAT，此参数无效）
    // 步长（即：每个顶点所包含数据的字节数）0 表示一个属性的数据是连续存放的
    // 偏移量（指定顶点属性数组中第一部分的字节偏移量）（在每个步长的数据里，目标属性需要偏移多少字节开始读取；必须是类型的字节长度的倍数）0 * 4 = 0
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

    // 随机颜色
    const { r, g, b, a } = randomColor();
    // 向片元着色器传递颜色信息
    gl.uniform4f(u_Color, r, g, b, a);

    // 绘制三角形
    // 指定绘制图元的方式 - gl.TRIANGLES（三角形）
    // 指定从哪个点开始绘制 - 0
    // 指定绘制需要使用到多少个点 - 3
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);



    return gl
}